<template>
  <div class="box">
    <router-link v-show="shows" class="box-round" to="/home">
      <div class="iconfont box-icon">&#xe624;</div>      
    </router-link>
  
    <!-- 标题 -->
    <router-link v-show="!shows" :style="opacityStyle" class="box-header" to="/home">
      <!-- 返回 -->
      <div class="header-left"><div class="iconfont back-icon">&#xe624;</div></div>
      <div class="header-text">{{title}}</div>
    </router-link>
  </div>
</template>

<script>
export default {
  name: "detailHeader",
  props: ["title"],
  data() {
    return {
      shows: true,
      opacityStyle: {opacity: 0},
    }
  },
  methods: {
    scrollFunt() { 
      
      
      let scrollTops = document.documentElement.scrollTop || document.body.scrollTop || window.pageYOffset;
      
      if(scrollTops > 60) {        
        this.shows = false;

        let a = scrollTops / 140 ? scrollTops / 140 : 1;
        this.opacityStyle.opacity = a;
      }else {      
        this.shows = true;
      }
    },
  },
  mounted() {
    window.addEventListener("scroll", this.scrollFunt);
  },
  destroyed() {
    window.removeEventListener("scroll", this.scrollFunt);
  },
}
</script>

<style scoped>
  .box {
    /* position: absolute; */
    position: fixed;
    top: 0px;
    left: 0px;
    right: 0px;
    
    height: 43px;
    z-index: 10;
    /* background-color: #fff; */
  }
  .box .box-round {
    position: absolute;
    top: 50%;

    border-radius: 50%;
    width: 40px;
    height: 40px;
    background-color: black;
    margin-left: 10px;

    transform: translateY(-50%);

    text-align: center;
    line-height: 40px;
  }
  .box .box-round .box-icon {
    color: #fff;
  }
  .box .box-header {    
    display: flex;
    text-align: center;

    background-color: #00bcd4; /* 背景颜色 */

    line-height: 43px; /* 文字剧中高度 */
    color:#fff;
  }
   /* 左侧 */
  .box .box-header .header-left {    
    float: left;
   
    /* width: 0.64rem; */
    width: 32px;       
  }
  .box .box-header .header-left .back-icon {
    /* font-size: 0.4rem; */
    font-size: 20px;
    text-align: center;
  }
  .box .box-header .header-text {
    margin-left: -32px;
    flex: 1;
  }
</style>